<template>
  <div></div>
</template>

<script setup>
import * as d3 from "d3";
import { onMounted } from "vue";
import { drawPropTextXAxis } from "@/api/axis";
import { initChart } from "@/api/canvas.ts";
import { drawLane } from "@/api/lane.ts";
import { laneAxis } from "@/constant/index.ts";
const props = defineProps({
  width: {
    type: Number,
    default: 950,
  },
  height: {
    type: Number,
    default: 650,
  },
});
//绘制泳道和对应的 x 轴
function drawLaneAndXAxis() {
  let $ = initChart(d3.select("svg"), props.width, props.height);
  drawLane($, [{ x: 50, y: 0, width: 150, height: props.height, count: 6 }]);
  laneAxis.forEach((element) => {
    element.forEach((item) => {
      drawPropTextXAxis(
        $,
        item.position,
        150,
        50,
        5,
        0.02,
        item.color,
        item.text
      );
    });
  });
}
onMounted(() => {
  //新增泳道
  drawLaneAndXAxis();
});
</script>

<style>
</style>